Raw Source
AngelKrak / Changer Style[CS] 

// ==UserScript==
// @name         Changer Style[CS]
// @namespace    http://tampermonkey.net/
// @description  Changer Style es un Script el cual te permite Establecer el Fondo que tu quieras en Cualquier Pagina y no solo eso, Tambien Permite Agregar Una Hoja de Estilos para Personalizar la Pagina a tu Gusto
// @version      0.1
// @author       Angel Komander(AK)
// @website      http://angelkrak.hol.es
// @match        none
// @grant        none
// @require      http://code.jquery.com/jquery-2.1.4.js
// @require      http://cdn.jsdelivr.net/alertifyjs/1.6.0/alertify.min.js
// @include      *
// ==/UserScript==
/************************** 
Para que sirve LocalStorage:
LocalStorage es una propiedad de HTML5 (web storage/almacenamiento local), que permite almacenar datos en nuestro navegador web. De manera muy similar a como lo hacen las cookies.
LocalStorage: Guarda información que permanecerá almacenada por tiempo indefinido; sin importar que el navegador se cierre.

Sus Caracteristicas son:
Permiten almacenar entre 5MB y 10MB de información; incluyendo texto y multimedia
La información está almacenada en la computadora del cliente y no es enviada al servidor en cada petición
No existe una caducidad para localStorage, la información quedará almacenada hasta que se elimine expresamente. Aunque se cierre el navegador
Utilizan un número mínimo de peticiones al servidor para reducir el tráfico de la red
Previenen pérdidas de información cuando se desconecta de la red
La información es guardada por domino web (incluye todas las páginas del dominio)
**************************/

/***** NOVEDADES

Changer Style[CS] - Version 0.1[INICIAL][05/12/2015]
 -Notificaciones(Si se Agrego Correctamente, Muestra una Notificacion)
 -LocalStorage(Almacenamos los Datos Ingresados Localmente para que no se borren)
 -Fondo de Imagen y Link de Estilos Externos(Actualmente puedes Establecer una Imagen de Fondo y un Link hacia tus Estilos Personalizados, Funciona En Cualquier Pagina)
 -Diseño Transparente/Semi-Transparente y Responsive(El Script estara Adaptado para que se Visualize en Cualquier Pantalla)
 -Recarga Automatica (Los Estilos/Fondo de Imagen se Cargaran al Principio y cada vez que se agregue algun dato(Fondo o Estilos), El Script se Recargara Automaticamente para Mostrar los Cambios)

*****/

/* Link Extras de Estilos */
jQuery('head').append('<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"><link rel="stylesheet" href="//cdn.jsdelivr.net/alertifyjs/1.6.0/css/alertify.min.css"/>');

/* Estilos para el Script */
jQuery('head').append('<style id="script" type="text/css">.contenedorAK *{margin: 0; padding: 0;}.contenedorAK .icono{position: fixed; font-size: 24px; top: 25px; right: 20px; padding: 15px; color: #FFF; z-index: 10000; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; background: rgba(0, 0, 0, .3); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease}.contenedorAK .menuak,.contenedorAK .opac-men{height: 100vh; position: fixed; top: 0}.contenedorAK .icono:hover{background: rgba(0, 0, 0, 1)}.contenedorAK .opac-men{width: 100vw; z-index: 9999; background: rgba(0, 0, 0, .4); left: 0; opacity: 0; pointer-events: none}.contenedorAK .menuak{width: 100%; max-width: 500px;background: rgba(0, 0, 0, .555); display: block; left: -100%; z-index: 10000;}.contenedorAK .setimg{border-radius: 0; box-shadow: none; cursor: pointer;}.contenedorAK .setimg:after,.contenedorAK .setimg:hover:after{content: ""; position: absolute; left: 0; bottom: 0; transition: all 1s ease;z-index:99999;}.contenedorAK .setimg:after{width: 0; border-bottom: 1px solid #504C4C;}.contenedorAK .setimg:hover:after{width: 100%}.contenedorAK .button,.contenedorAK .input-span{margin-top: -1px}.contenedorAK .button,.contenedorAK h2.insert{cursor: pointer}.contenedorAK .button{outline: 0; width: 100%; padding: 16px 0px; border: 0; background: rgba(18, 18, 19, 0.6); color: rgba(255, 255, 255, 0.6); font-weight: 400; font-family: "Helvetica"; font-size: 16px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);height: auto;}.contenedorAK h2.insert{background-color: rgba(0, 0, 0, .5); color: rgb(255, 255, 255); box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .14), 0 3px 2px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); text-align: center; width: auto; padding: 16px; margin-bottom: -1px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;font-family: serif;}.contenedorAK .selectJK{z-index: 10000;}.contenedorAK .input-span{position: relative; display: table; width: 100%;}.contenedorAK .ico-img:last-child{border-left: 1px solid rgba(16, 13, 13, .5);}.contenedorAK .ico-img{width: 1%; padding: 0 1rem; background: rgba(16, 13, 13, .7); color: rgba(255, 255, 255, .5);font-family: "roboto";font-size: 1rem;position: relative;}.contenedorAK .input-span *{display: table-cell; box-sizing: border-box;}.contenedorAK input{display: block; height: 2.5rem; padding: .60rem; width: 100%; background: rgba(0, 0, 0, .5); border: 0; outline: none; color: rgba(255, 255, 255, .6);font-family:"Indie Flower", cursive;}</style>');

/* Creamos la Variable que Contiene el HTML Script */
var contenido = '<div class="contenedorAK"> <i class="fa fa-bars icono"></i> <div class="opac-men"></div><div class="menuak"> <div class="selectJK"> <div class="uno"> <h2 class="insert">Agregar Imagenes</h2> <div class="input-span"> <input type="text" placeholder="Fondo de Imagen" id="fondo"> <span id="setfondo" class="btn-add setimg ico-img">Agregar</span> </div><div class="input-span"> <input type="text" placeholder="Link de Estilos" id="estilos"> <span id="setestilos" class="btn-add setimg ico-img">Agregar</span> </div><button class="button" id="boton-guardar">Agregar Todos</button> </div></div></div></div>';
/* Agregamos el contenido del Arrow(Cambiador de Imagenes) */
$("body").append(contenido);

/* Fix to Youtube */
$("body").find("#yt-masthead").append(contenido);

/* Boton/Icono de Abrir */
var menu = 0;

$(".contenedorAK .icono").click(function() {
	if (menu === 0) {
		$(".contenedorAK .menuak").animate({
			"left": "0"
		}, "slow");
		$(".contenedorAK .icono").removeClass("fa-bars");
		$(".contenedorAK .icono").addClass("fa-times");
		$(".contenedorAK .opac-men").animate({
			"opacity": "1"
		}, "slow");
		menu = 1;
	} else {
		$(".contenedorAK .menuak").animate({
			"left": "-100%"
		}, "slow");
		$(".contenedorAK .icono").removeClass("fa-times");
		$(".contenedorAK .icono").addClass("fa-bars");
		$(".contenedorAK .opac-men").animate({
			"opacity": "0"
		}, "slow");
		menu = 0;
	}
});

/* LocalStorage - Funcion de Guardar */
$(document).ready(function(){
	//Establecer Imagen de Fondo
	$('.contenedorAK #setfondo').click(function(){
		event.preventDefault();
		if (confirm('Estas Seguro(a) ?')) {
			/*Captura de datos escrito en los inputs*/        
			var fon = document.getElementById("fondo").value;
			/*Guardando los datos en el LocalStorage*/
			localStorage.setItem("Fondo", fon);
			/*Limpiando los campos o inputs*/
			document.getElementById("fondo").value = "";
			/* Notificaciones con Alertify */
			alertify.success('Agregado Correctamente');
			/* Volvemos a Cargar la Funcion de Cargar y Asignar */
			cargaryasignar();
		}
	});

	//Establecer Estilos
	$('.contenedorAK #setestilos').click(function(){
		event.preventDefault();
		if (confirm('Estas Seguro(a) ?')) {
			/*Captura de datos escrito en los inputs*/        
			var estilos = document.getElementById("estilos").value;
			/*Guardando los datos en el LocalStorage*/
			localStorage.setItem("Estilos", estilos);
			/*Limpiando los campos o inputs*/
			document.getElementById("estilos").value = "";
			/* Notificaciones con Alertify */
			alertify.success('Agregado Correctamente');
			/* Volvemos a Cargar la Funcion de Cargar y Asignar */
			cargaryasignar();
			/* Removemos el Estilo Antiguo y Asignamos el Nuevo */
			$("head .styleAK").remove();
			var estilos2 = '<link rel="stylesheet" href="'+estilos+'" class="styleAK">';
			$("head").append(estilos2);
		}
	});

	/* Guarda todas las Imagenes Escritas en los Input */
	$('.contenedorAK #boton-guardar').click(function(){
		event.preventDefault();
		if (confirm('Estas Seguro(a) ?')) {
			/*Captura de datos escrito en los inputs*/        
			var fon = document.getElementById("fondo").value;
			var estilos = document.getElementById("estilos").value;

			/*Guardando los datos en el LocalStorage*/
			localStorage.setItem("Fondo", fon);
			localStorage.setItem("Estilos", estilos);

			/*Limpiando los campos o inputs*/
			document.getElementById("fondo").value = "";
			document.getElementById("estilos").value = "";

			/* Notificaciones con Alertify */
			alertify.success('Agregados Correctamente');

			/* Volvemos a Cargar la Funcion de Cargar y Asignar */
			cargaryasignar();

			/* Removemos el Estilo Antiguo y Asignamos el Nuevo */
			$("head .styleAK").remove();
			var estilos2 = '<link rel="stylesheet" href="'+estilos+'" class="styleAK">';
			$("head").append(estilos2);
		}
	});
});

/* Funcion Cargar y Establecer */
function cargaryasignar(){ //Creamos la Funcion donde se asignara el Fondo y los Estilos
	/* Obtener datos almacenados mediante una Variable */
	var fondo = localStorage.getItem("Fondo");
	var estilos = localStorage.getItem("Estilos");

	//Establecemos el Fondo de la Pagina
	var background = "background-image: url('"+fondo+"') !important;background-size:cover;background-attachment:fixed;";
	$("body, html").attr("style", background);

	//Establecemos el Fondo del Sidebar
	$("head .styleAK").remove();
	var estilos2 = '<link rel="stylesheet" href="'+estilos+'" class="styleAK">';
	$("head").append(estilos2);
} //Termine la Funcion cargaryasignar()
setTimeout(cargaryasignar); //Cargamos la Funcion al Principio